{% extends 'base.html' %}
{% load static %}

{% block title %}Server Error — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
  .err-wrap {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
  }
  .err-code {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #dc3545, #fd7e14);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .err-divider {
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #dc3545, #fd7e14);
    border-radius: 2px;
    margin: 1.25rem auto;
  }
</style>
{% endblock %}

{% block content %}
<div class="err-wrap">
  <div class="text-center">

    <div class="err-code">500</div>
    <div class="err-divider"></div>

    <h2 class="fw-bold mb-2" style="font-size:1.6rem;">Internal Server Error</h2>
    <p class="text-muted mb-4" style="max-width:420px;margin:0 auto;">
      Something went wrong on our end. Please try again in a moment.
      If the problem persists, contact the administrator.
    </p>

    <div class="d-flex flex-wrap gap-3 justify-content-center">
      <a href="/" class="btn btn-primary px-4 py-2 fw-semibold rounded-pill shadow-sm">
        <i class="bi bi-house-fill me-2"></i>Go to Home
      </a>
      {% if user.is_authenticated %}
      <a href="{% url 'dashboard:redirect' %}" class="btn btn-outline-secondary px-4 py-2 fw-semibold rounded-pill">
        <i class="bi bi-speedometer2 me-2"></i>Dashboard
      </a>
      {% endif %}
    </div>

  </div>
</div>
{% endblock %}